.wrapper {
    z-index: 99;
    width: 90%;
    position: fixed;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -2em);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    transition: transform 0.25s ease-in-out;
  
    &.open {
      transform: translate(-50%, calc(-100% - 1em));
    }
  }
  
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1em;
    background-color: hsl(237, 37%, 24%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  
    &:hover {
      cursor: pointer;
    }
  
    &.open svg {
      transform: rotate(180deg);
    }
  
    svg {
      transition: transform 0.25s ease-in-out;
      fill: hsla(0, 0%, 100%, 0.5);
      width: 2em;
    }
  }
  
  .controls {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 1em 1.5em;
    background-color: hsl(237, 37%, 24%);
    border-radius: 10px;
  
    svg {
      fill: hsla(0, 0%, 100%, 0.5);
      width: 1.75em;
  
      &:hover {
        cursor: pointer;
      }
    }
  }
  
  .shuffle,
  .reset {
    margin: 0 0.5em;
  }
  
  .reset {
    margin-right: 1.5em;
  }